<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>娃娃Get抓娃娃</title>


    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/js/swiper-4.4.2/swiper.min.css" />
    <link rel="stylesheet" href="assets/css/sweetalert.min.css" />
    <link rel="stylesheet" href="assets/css/main.css" />

    <script src="assets/js/jquery.slim.min.js"></script>
    <script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/swiper-4.4.2/swiper.min.js"></script>
    <script src="assets/js/sweetalert.min.js"></script>
    <script src="assets/js/common.js"></script>




</head>
<body class="main-color">
    <!--start banner-->
    <div class="swiper-container goods-banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img class="banner-img" src="assets/images/doll.png" alt=""></div>
            <div class="swiper-slide"><img class="banner-img" src="assets/images/doll.png" alt=""></div>
            <div class="swiper-slide"><img class="banner-img" src="assets/images/doll.png" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <!--end banner-->

    <div class="goods-container">
        <!--start box-->
        <div class="goods-box">
            <p class="goods-name">甜筒星球-羊驼</p>
            <p class="goods-slogan">萌萌哒羊驼,可以剪刘海的哦</p>
            <div class="goods-cart-info flex">
                <div class="goods-price">
                    <span class="cur-price">￥36</span>
                    <span class="mark-price"><del>市场价格￥78</del></span>
                </div>
                <a href="javascript:;" class="goods-cart-btn" onclick="add_cart('id',1)"></a>
            </div>
        </div>
        <!--end box-->

        <!--start box-->
        <div class="goods-box">
            <div class="goods-desc-item flex">
                <div class="goods-desc-name">品牌:</div>
                <div class="goods-desc-val">嵩二</div>
            </div>

            <div class="goods-desc-item flex">
                <div class="goods-desc-name">品名:</div>
                <div class="goods-desc-val">甜筒星球</div>
            </div>

            <div class="goods-desc-item flex">
                <div class="goods-desc-name">口味:</div>
                <div class="goods-desc-val">草莓酱</div>
            </div>

            <div class="goods-desc-item flex">
                <div class="goods-desc-name">净含量:</div>
                <div class="goods-desc-val">100g</div>
            </div>

            <div class="goods-desc-item flex">
                <div class="goods-desc-name">配料表:</div>
                <div class="goods-desc-val">
                    辣椒(魔鬼辣椒)，食用油，鲍鱼酱，白芝麻，白砂糖，天然香料，食用盐
                </div>
            </div>
        </div>
        <!--end box-->

        <!--start box-->
        <div class="goods-box goods-detail-content">
            <img src="assets/images/doll.png" alt="">
        </div>
        <!--end box-->

        <div class="goods-buy-btn-top"></div>
    </div>




    <div class="goods-attr-info" style="display: none;">
        <div class="mask" onclick="hide_attr()"></div>
        <div class="goods-attr-wrapper">
            <div class="goods-attr-thumb-info flex">
                <div class="goods-attr-thumb">
                    <img src="assets/images/doll.png" alt="">
                </div>
                <div class="goods-attr-detail-info">
                    <p class="title">范冰冰同款粉红豹范冰冰同款粉红豹</p>
                    <p class="price">￥39</p>
                </div>
            </div>

            <!--start attr item-->
            <div class="goods-attr-item">
                <div class="title" data-id="规格">规格</div>
                <div class="attr-val-list">
                    <span class="attr-value-item active" data-id="26CM">26CM</span>
                    <span class="attr-value-item" data-id="32CM">32CM</span>
                    <span class="attr-value-item" data-id="34CM">34CM</span>
                    <span class="attr-value-item" data-id="38CM">38CM</span>
                    <span class="attr-value-item" data-id="42CM">42CM</span>
                </div>
            </div>
            <!--end attr item-->

            <!--start attr item-->
            <div class="goods-attr-item">
                <div class="title" data-id="颜色">颜色</div>
                <div class="attr-val-list">
                    <span class="attr-value-item active" data-id="黄色">黄色</span>
                    <span class="attr-value-item" data-id="32CM">黄色</span>
                </div>
            </div>
            <!--end attr item-->


            <!--start attr item-->
            <div class="buy-number-wrapper">
                <div class="title">数量</div>
                <div class="buy-number-info">
                    <span class="buy-num-op inline" data-op="-">-</span>
                    <input class="inline buy-num-input" id="buy-number" type="number" value="1" min="1">
                    <span class="buy-num-op inline" data-op="+">+</span>
                    <span class="inline stock-number">库存 <span>450</span> </span>
                </div>
            </div>
            <!--end attr item-->
            <div class="buy-confirm-btn">确认</div>
        </div>
    </div>




    <div class="goods-buy-btn">立即购买</div>


    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })

        $(function(){
            //弹出属性选择
            $('.goods-buy-btn').click(function(){
                    show_attr();
            })

            //处理商品属性
            $('.attr-value-item').click(function(){
                if($(this).hasClass('active')) {
                    $(this).removeClass('active');
                } else {
                    $(this).addClass('active').siblings().removeClass('active');
                }
            })

            //处理数量
            $('.buy-num-op').click(function(){
                var op = $(this).data('op');
                var num = parseInt($('#buy-number').val())
                if(op=='-') {
                    num = num - 1;
                } else {
                    num = num + 1;
                }
                if(num<=0) {
                    num = 1;
                }
                $('#buy-number').val(num);
            })


            //处理确认
            $('.buy-confirm-btn').click(function(){
                var attr_info = get_attr_info();
                if(attr_info[1]!=true) {
                    swal('',attr_info[1],'error');
                    return false;
                }
                var data = attr_info[0];
                console.log('do something');
                swal('','确认成功(5秒后跳转)','success');
                hide_attr();
                setTimeout(function(){
                    window.location.href="confirm.html";
                },5000)
            })
        })


        function get_attr_info() {
            var obj = {}
            var error = '';
            $('.goods-attr-item').each(function() {
                var active = $(this).find('.attr-value-item.active');
                var id = $(this).find('.title').data('id');
                if(active.length==0) {
                    error = id + ' Not Select';
                    return false;
                }
                var value = active.data('id');
                obj[id] = value
            })
            if(error!='') {
                return [obj,error];
            }
            return [obj,true];
        }

        function show_attr() {
            $('.goods-attr-info').show();
        }

        function hide_attr() {
            $('.goods-attr-info').hide();
        }

    </script>


</body>
</html>